document.addEventListener('DOMContentLoaded', function () {
    const x_token = localStorage.getItem('x-token')
    axios.get('/index/baseInfo', {params: {x_token}})
        .then(({ data: { data } }) => {
            document.querySelector('.box1').innerHTML = `
            <div class="item">
        <img src="./images/10001.png" alt="">
        <div class="text">
          <p>管理员用户</p>
          <span>${data.admin_num}</span>名
        </div>
      </div>
      <div class="item">
        <img src="./images/10002.png" alt="">
        <div class="text">
          <p>平台注册用户</p>
          <span>${data.user.total}</span>名
        </div>
      </div>
      <div class="item">
        <img src="./images/10003.png" alt="">
        <div class="text">
          <p>平台文章总数</p>
          <span>${data.article_num}</span>名
        </div>
      </div>
      <div class="item">
        <img src="./images/10004.png" alt="">
        <div class="text">
          <p>广告位 <span>${data.advimg_num}</span>个</p>
          <p>广告图 <span>${data.advpos_num}</span>个</p>
        </div>
      </div>
            `
            let arr = []
            const new_user = data.new_user.map((item, index) => {
              arr.push(item.sex)
                if (arr[index] === 0) {
                    arr[index] = '男'
                }else {
                    arr[index] = '女'
                }
                return `
                <li>
                 <span>${item.username}</span>
                 <span>${arr[index]}</span>
                </li>
                `
            }).join('')
            document.querySelector('.user ul').innerHTML = new_user

            const hot_article = data.hot_article
                .map((item) => {
                    return `
                <li>
                <p>${item.title}</p>
              </li>
                `
                }).join('')
            document.querySelector('.article ul').innerHTML = hot_article

            userSexChart(data.user.user_woman, data.user.user_man,)
        articleChart(data.all_cate)
        })

        
})

//todo 用户性别分析

 function userSexChart(user1, user2){
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#nav'))

    // 指定图表的配置项和数据
    const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '用户来源：',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: user1 , name: '女' },
              { value: user2, name: '男' }
             
            ]
          }
        ]
      };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
}

//todo 各分类文章发布数量
 function articleChart(article){
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#nav1'))

    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '各分类文章发布数量',
        left: 'center',
        textStyle: {
          fontSize: 16,
          color: "rgba(70, 100, 235, 1)"
        },
      },
        xAxis: {
          type: 'category',
          data: article.map((item) => item.catename),
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: article.map((item) => item.num),
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
}
